import React, { useState, useTransition } from "react";

const Loading = () => {
  return <div>loading...</div>;
};

const App = () => {
  // 调用返回一个数组
  // isPending表示是否在进行中,默认是false
  // startTransition是一个方法
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(1);

  const fn = () => {
    startTransition(() => {
      setCount((v) => v + 1);
    });
  };

  return (
    <>
      <h2>useTransition</h2>
      {isPending && <Loading />}
      <div>count: {count}</div>
      <button onClick={fn}>btn</button>
    </>
  );
};

export default App;
